.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .video-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgb(var(--v-theme-background));
  }

  .control {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: transform 0.3s ease-out;

    .lt {
      position: absolute;
      top: 0.75rem;
      left: 1rem;
    }

    .rt {
      position: absolute;
      top: 0.75rem;
      right: 1rem;
    }

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
    }

    .bc {
      width: calc(100% - 2rem);
      position: absolute;
      bottom: 1.125rem;
      left: 1rem;

      .time {
        font-family: monospace;
      }

      .feature {
        display: flex;
        margin-top: 1rem;
      }
    }
  }

  .no-fullscreen-time-bar {
    width: calc(100% - 2rem);
    position: absolute;
    left: 1rem;
    bottom: 4.625rem;
  }

  .time-bar {
    padding: 0.5rem 0 0.25rem;
    position: relative;

    .total {
      width: 100%;
      height: 0.25rem;
      background: rgba(255, 255, 255, 0.7);
      position: absolute;
      top: 0.5rem;
    }

    .curr {
      width: 100%;
      height: 0.25rem;
      background: rgba(255, 255, 255, 1);
      position: absolute;
      top: 0.5rem;
      transform-origin: left;
      will-change: transform;

      .end-point {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 0.75rem;
        background: #fff;
        position: absolute;
        right: 0;
        top: -0.25rem;
        transform-origin: left;
      }
    }

    &.small {
      .total {
        height: 0.125rem;
      }

      .curr {
        height: 0.125rem;

        .end-point {
          width: 0.375rem;
          height: 0.375rem;
          top: -0.125rem;
        }
      }
    }
  }

  .play-pause-control {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    transition: transform 0.5s, opacity 0.5s;

    &.close {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }

    &.play {
      background: #fff;
      clip-path: polygon(6.7% 0%, 6.7% 100%, 93.3% 50%, 6.7% 0%);
    }

    &.pause {
      &::before,
      &::after {
        content: '';
        width: 1rem;
        height: 4rem;
        background-color: #fff;
        position: absolute;
      }

      &::before {
        left: 0.5rem;
      }

      &::after {
        right: 0.5rem;
      }
    }
  }

  .loading-cube,
  .loading-mask,
  .in-card-loading-mask {
    position: absolute;
    top: 0;
  }

  .in-card-loading-mask {
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
    @include loading-skeleton;
  }
}

.desktop {
  .video-container {
    .no-fullscreen-time-bar {
      bottom: 0.5rem;
    }
  }
}